<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 WebSocket Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f9f9f9;
      color: #333;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .message {
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f0f8ff;
    }

    .send-form {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }

    .message-input {
      flex: 1;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button {
      padding: 8px 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #0056b3;
    }

    .status {
      margin-top: 10px;
      font-weight: bold;
    }

    .connected {
      color: #28a745;
    }

    .disconnected {
      color: #dc3545;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <h1>WebSocket Demo</h1>
    <div v-for="(message, index) in messages" :key="index" class="message">
      {{ message }}
    </div>
    <form @submit.prevent="sendMessage" class="send-form">
      <input
        v-model="message"
        type="text"
        placeholder="Enter message..."
        @keypress.enter="sendMessage"
        class="message-input"
      />
      <button type="submit">Send</button>
    </form>
    <div class="status" :class="{ connected: isConnected, disconnected: !isConnected }">
      <div v-if="isConnected">Connected</div>
      <div v-else>Disconnected</div>
    </div>
  </div>

  <!-- Vue.js CDN -->
  <script src="https://unpkg.com/vue@3.4.17/dist/vue.global.prod.js"></script>
  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        const socket = new WebSocket('wss://echo.websocket.org'); // 替换为你的 WebSocket 服务器地址
        const messages = ref([]);
        const message = ref('');
        const isConnected = ref(false);

        // 监听 WebSocket 连接状态
        socket.addEventListener('open', () => {
          isConnected.value = true;
          messages.value.push('Connected to WebSocket server');
        });

        // 监听 WebSocket 接收的消息
        socket.addEventListener('message', (event) => {
          messages.value.push(`Received: ${event.data}`);
        });

        // 监听 WebSocket 错误
        socket.addEventListener('error', (error) => {
          messages.value.push(`Error: ${error.message}`);
          isConnected.value = false;
        });

        // 监听 WebSocket 关闭
        socket.addEventListener('close', () => {
          messages.value.push('Disconnected from WebSocket server');
          isConnected.value = false;
        });

        // 发送消息
        const sendMessage = () => {
          if (message.value.trim() === '') return;

          socket.send(message.value);
          messages.value.push(`Sent: ${message.value}`);
          message.value = '';
        };

        return {
          messages,
          message,
          isConnected,
          sendMessage,
        };
      },
    }).mount('#app');
  </script>
</body>
</html>